import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addCarBuyNum, decCarBuyNum } from '../store/slice/carSlice'

export default function CarList() {
    let {carList} = useSelector(state => state.car)
    const dispatch = useDispatch()
  return (
    <div>
      <h3>购物车列表</h3>
      <ul>
        {carList.map(car => (
                <li key={car.id}>
                    <h4>商品名称： {car.gname}</h4>
                    <p>商品价格： {car.gprice}</p>
                    <p>商品数量：<button onClick={() => {
                            dispatch(decCarBuyNum(car.id))
                        }}>-</button> 
                        {car.buyNum} 
                        <button onClick={() => {
                            dispatch(addCarBuyNum(car.id))
                        }}>+</button> 
                    </p>
                </li>
            ))}
        
       
      </ul>
    </div>
  )
}
